<template>
  <div class="workFlowDetail">
    <div style="margin-bottom: 10px">
      <jc-button
        :btn-arr="['remove', 'reload', 'option', 'pass', 'sub', 'save', 'push', 'list']"
        :disab-arr="['close', 'cancel', 'toExcel', 'using', 'com1', 'com2', 'freeze']"
        :fbillno="production.fbillNo"
        :list="'/workFlow'"
        @save="save"
        @refresh="workDetail"
        @submit="submit(1)"
        @noSubmit="submit(2)"
        @audit="audit(1)"
        @noAudit="audit(2)"
        @del="delPublic"
        @pushDown="pushDown"
      />
    </div>
    <el-tabs v-model="activeName" @tab-click="handleOther">
      <el-tab-pane :label="$t('market.info')" name="first">
        <el-form ref="purchaseRef" :model="production" label-width="100px">
          <el-form-item :label="$t('market.documentstatus')">
            <el-tag :type="production.stateColor">{{ production.fdocumentstatus }}</el-tag>
          </el-form-item>
          <el-form-item :label="$t('market.orderDate')">
            <el-date-picker
              v-model.trim="production.fdate"
              type="date"
              value-format="yyyy-MM-dd"
              size="mini"
              :disabled="isDisabled"
            />
          </el-form-item>
          <el-form-item :label="$t('market.orderNum')">
            <el-input v-model.trim="production.fbillNo" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.salOrder')">
            <el-input v-model.trim="production.fbilltype" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.craftnumber')">
            <el-input v-model.trim="production.fcraftnumber" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.fcraftname')">
            <el-input v-model.trim="production.fcraftname" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.srcbillno')">
            <el-input v-model.trim="production.fsrcbillno" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.moseq')">
            <el-input v-model.trim="production.fmoseq" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.srcmoqty')">
            <el-input v-model.trim="production.fmoqty" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.workshop')">
            <el-input v-model.trim="production.fworkshop" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.fmodel')">
            <el-input v-model.trim="production.fmodel" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.fmaterial')">
            <el-input v-model.trim="production.fnumber" disabled />
          </el-form-item>
          <el-form-item :label="$t('shop.fname2')">
            <el-input v-model.trim="production.fname" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.funit')">
            <el-input v-model.trim="production.funit" disabled />
          </el-form-item>
          <el-form-item :label="$t('shop.fspecificaTion')">
            <el-input v-model.trim="production.fspecificaTion" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.fdescripTion')" style="width: 500px;">
            <el-input v-model.trim="production.fdescripTion" style="width: 100%;" disabled />
          </el-form-item>
        </el-form>
        <div style="margin-top: 10px;">
          <el-button size="mini" style="margin-bottom: 5px;" @click="newHang">{{ $t('btn.newHang') }}<!--新增行--></el-button>
          <el-button size="mini" style="margin-bottom: 5px;" @click="delHang">{{ $t('btn.delHang') }}<!--删除行--></el-button>
          <el-button size="mini" :disabled="isDisabled" @click="batchFill">{{ $t('btn.batchFill') }}<!--批量填充--></el-button>
        </div>
        <jc-table
          :table-data="tableData"
          :table-header="tableHeard"
          :table-height="tableHeight"
          serial
          :get-summaries="getSummaries"
          show-summary
          @cellClick="cellClick"
          @rowClick="rowClick"
        >
          <!--组别-->
          <template v-slot:tagSlot="col">
            <el-input
              v-model="col.scope.row.fgroupname"
              size="mini"
              :disabled="isDisabled"
            >
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="groupOpen(col.scope.$index)"
              />
            </el-input>
          </template>
          <!--工序编码-->
          <template v-slot:btnStates="col">
            <el-input
              v-model="col.scope.row.fprocessnumber"
              readonly="readonly"
              :disabled="isDisabled"
              size="mini"
            >
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="processOpen(col.scope.$index)"
              />
            </el-input>
          </template>
          <template v-slot:billSlot="col">
            <el-input-number v-model="col.scope.row.fnum" :disabled="isDisabled" :min="1" @change="numHeadel(col.scope.$index)" />
          </template>
          <template v-slot:text2Slot="col">
            <el-input-number v-model="col.scope.row.fprice" :disabled="isDisabled" :min="0" @change="numHeadel(col.scope.$index)" />
          </template>
          <!--操作-->
          <template v-slot:btnState="col">
            <el-input v-model="col.scope.row.fremark" size="mini" :disabled="isDisabled" />
          </template>
        </jc-table>
      </el-tab-pane>
      <el-tab-pane :label="$t('market.other')" name="log">
        <jc-marker
          ref="log"
          :fnumber="production.fbillNo"
          other-height="64vh"
          :other-url-object="otherUrlObject"
        />
      </el-tab-pane>
    </el-tabs>
    <!--组别-->
    <group v-if="groupVis" :fid="production.fworkshopid" @group="groupData" />
    <!--工序编码-->
    <processnum v-if="processVis" :group-id="groupId" @process="processData" />
    <!--  下推单据  -->
    <el-dialog
      v-dialogDrag
      :title="$t('market.checkBill')"
      model
      :visible.sync="isdanjuDialog"
      :close-on-click-modal="false"
      width="600px"
      top="5vh"
      center
    >
      <div style="text-align: center;height: 100px;line-height: 100px">
        <el-radio-group v-model="orderLX">
          <el-radio v-for="item in receipts" :key="item" :label="item">{{ item }}</el-radio>
        </el-radio-group>
      </div>
      <hr>
      <div style="text-align: center;">
        {{ $t('market.rule') }}
        <el-input v-model="convert" size="mini" disabled style="width: 178px;margin-bottom: 5px;" />
        <br>
        {{ $t('market.billType') }}
        <el-select
          v-model.trim="fbillTypeId"
          size="mini"
          filterable
        >
          <el-option
            v-for="(item, index) in billTypeData"
            :key="index"
            :label="item.fname"
            :value="item.fid"
            :disabled="item.fid===185||item.fid===186"
          />
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isdanjuDialog = false">{{ $t('btn.cancel') }}</el-button>
        <el-button size="mini" type="primary" @click="pushDownOrder()">{{ $t('btn.confirm') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  insertWorkReport, processAudit, processAuSubmit,
  processDelete, processSubmit, processUnAudit,
  queryProcessDetails, updateProcess
} from '@/api/production/process'
import jcMarker from '@/components/marker'
import jcButton from '@/components/Button'
import { queryViewItem } from '@/api/marketManage/marketOrder'
import { toMxBmina } from '@/components/ToMxamineState'
import jumpMateriel from '@/components/JumpMateriel'

export default {
  components: {
    jcMarker,
    jcButton,
    group: () => import('@/views/production/process/workFlowDetail/component/group'),
    processnum: () => import('@/views/production/process/workFlowDetail/component/processnum')
  },
  mixins: [jumpMateriel],
  data() {
    return {
      groupVis: false, // 组别列表
      processVis: false, // 工序列表
      groupId: '',
      activeName: 'first',
      orderLX: this.$t('menu.theWork'),
      receipts: [this.$t('menu.theWork')], // 生产
      fbillTypeId: 246,
      convert: this.$t('market.lczbg'), // '生产流程单至报工单',
      billTypeData: [], // 采购订单单据
      isdanjuDialog: false,
      production: {},
      tableData: [],
      tableHeard: [
        { label: this.$t('market.tranches'), type: 'tag', prop: 'fgroupname', minWidth: '120px' },
        { label: this.$t('market.processname'), type: 'states', prop: 'fprocessnumber', minWidth: '120px' },
        { label: this.$t('market.processnumber'), prop: 'fprocessname', minWidth: '120px' },
        { label: this.$t('market.fqty'), prop: 'fqty', minWidth: '120px' },
        { label: this.$t('market.multiple'), type: 'bill', prop: 'fnum', minWidth: '120px' },
        { label: this.$t('market.fprice'), type: 'text2', prop: 'fprice', minWidth: '120px' },
        { label: this.$t('market.billamount'), prop: 'fsumprice', minWidth: '120px' },
        { label: this.$t('market.pushqty'), prop: 'fpushqty', minWidth: '120px' },
        { label: this.$t('market.note'), type: 'state', prop: 'fremark', minWidth: '120px' }
      ],
      isDisabled: false,
      delFentrys: [],
      indexSelf: 0,
      tableHeight: '67vh',
      otherUrlObject: {}
    }
  },
  created() {
    this.workDetail()
    this.tableHeight = window.innerWidth > 1440 ? 'calc(100vh - 330px)' : '72vh'
  },
  methods: {
    // 修改
    save() {
      this.production.details = this.tableData
      updateProcess({ ...this.production }).then(res => {
        if (res.code === 0) {
          this.workDetail()
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 详情
    workDetail() {
      queryProcessDetails({ fid: this.$route.params.id }).then(res => {
        if (res.code === 0) {
          this.production = toMxBmina(res.data)
          this.isDisabled = this.production.fdocumentstatus === this.$t('market.state1') || this.production.fdocumentstatus === this.$t('market.state2')
          this.otherUrlObject = res.data
          this.tableData = res.data.details
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 组别弹窗
    groupOpen(index) {
      this.indexSelf = index
      this.groupVis = true
    }, // 获取组别
    groupData(ev) {
      const item = this.tableData[this.indexSelf]
      if (ev.groupId) {
        item.fgroupname = ev.groupName
        item.fgroupid = ev.groupId
      }
      this.groupVis = false
    }, // 工序
    processOpen(index) {
      this.groupId = this.tableData[index].fgroupid
      this.indexSelf = index
      this.processVis = true
    },
    // 获取工序
    processData(ev) {
      const item = this.tableData[this.indexSelf]
      if (ev.fid) {
        item.fprocessnumber = ev.fprocessnumber
        item.fprocessname = ev.fprocessname
        item.fgroupdetailid = ev.fid
        item.fprice = ev.fprice
        item.fsumprice = (item.fprice * (item.fqty * item.fnum)).toFixed(2)
      }
      this.processVis = false
    }, // 监听倍数
    numHeadel(index) {
      const item = this.tableData[index]
      item.fqty = this.production.fmoqty * item.fnum
      item.fsumprice = (item.fprice * item.fqty).toFixed(2)
    },
    // 报工单订单单据
    async purpoorder1() {
      const { data: RES } = await queryViewItem({ viewName: 'SX_WORKREPORT' })
      this.billTypeData = RES.list
    },
    // 下推
    pushDown() {
      if (this.val && this.val.length <= 0) {
        this.$message.error('请选择数据!')
        return
      }
      this.purpoorder1()
      this.isdanjuDialog = true
    },
    // 公共函数
    toExamineFun(api) {
      const DATA = { Numbers: [this.production.fbillNo] }
      api(DATA).then(res => {
        if (res.code !== 0) {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
          return
        }
        this.workDetail()
        this.innerHTM = ''
        res.data.forEach(res => {
          this.innerHTM += '<div>' + res + '</div>'
        })
        this.$notify.warning({
          title: '提示',
          message: this.innerHTM,
          duration: 3000, offset: 50,
          dangerouslyUseHTMLString: true
        })
      })
    },
    // 审批通过
    async audit(ev) {
      const api = ev === 1 ? processAudit : processUnAudit
      this.toExamineFun(api)
    },
    // 提交、反提交
    async submit(ev) {
      const api = ev === 1 ? processSubmit : processAuSubmit
      this.toExamineFun(api)
    },
    // 删除
    delPublic() {
      this.$confirm('此操作将永久删除该订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const DATA = { Numbers: [this.production.fbillNo] }
        processDelete(DATA).then(res => {
          if (res.code !== 0) {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'error'
            })
            return
          }
          this.innerHTM = ''
          res.data.forEach(res => {
            this.innerHTM += '<div>' + res + '</div>'
          })
          this.$notify.warning({
            title: '提示',
            message: this.innerHTM,
            duration: 3000, offset: 50,
            dangerouslyUseHTMLString: true
          })
          // 关闭当前页面
          this.$store.dispatch('tagsView/guanbi', this.$route)
          this.$router.replace({ path: '/workFlow' })
        })
      })
    },
    // 下推
    pushDownOrder() {
      this.fentryData = []
      this.tableData.forEach(item => {
        this.fentryData.push(item.fentryid)
      })
      const DATA = {
        SoucrceIds: [this.production.fid],
        EntryIds: this.fentryData,
        fbillTypeId: this.fbillTypeId
      }
      if (this.orderLX === this.$t('menu.theWork')) {
        insertWorkReport(DATA).then(res => {
          if (res.code === 0) {
            this.$router.push({
              path: `/workOrderDetail/${res.data}`
            })
            this.isdanjuDialog = false
          } else {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'error'
            })
          }
        })
      }
    }, // 新增行
    newHang() {
      this.tableData.push({
        fentryid: 0,
        fgroupname: '',
        fprocessnumber: '',
        fprocessname: '',
        fqty: this.production.fmoqty,
        fnum: 1,
        fprice: 0,
        fsumprice: 0,
        fpushqty: 0
      })
    },
    // 单击行
    rowClick(row) {
      this.indexSelf = row.index
    },
    // 删除行
    delHang() {
      const fid = this.tableData[this.indexSelf].fentryId
      this.delFentrys.push(fid)
      this.tableData.splice(this.indexSelf, 1)
    },
    handleOther(tab) {
      if (tab.name === 'log') {
        this.$refs.log.otherlog()
      }
    },
    // 点击单元格
    cellClick(row, column, cell, event) {
      this.property = column.property
      this.subscript = row.index
    },
    // 批量填充
    batchFill() {
      const item = this.tableData[this.subscript][this.property]
      this.tableData.map((res, index) => {
        if (index >= this.subscript) {
          res[this.property] = item
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.workFlowDetail {
  @include listBom;
  padding: 10px;
  background: #FFFFFF;
  min-height: 89vh;
  .el-input::v-deep .el-input__inner {
    height: 30px;
    line-height: 30px;
  }
  .el-form {
    display: flex;
    flex-wrap: wrap;

    .el-form-item {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      height: 35px;
      width: 275px;
      margin-bottom: 3px;

      .btnType {
        margin-right: 5px;
      }

      .el-date-editor.el-input {
        width: 100% !important;
      }

      .el-select {
        width: 100%;
      }
    }
  }
}
</style>
